
<script setup>
import { values } from "lodash";
import { ref, watch, computed } from "vue";

const editor = ref(false);
const formData = ref({
  x: 0,
  y: 0,
  w: 16,
  h: 16,
  key:'0',

  offestX:0,
  offestY:0,
  batchSet:false
});

const props = defineProps(["visible", "data"]);
const emit = defineEmits(["update:visible"]);

let dialogVisible = ref(false);

watch(
  () => props.visible,
  (nv, ov) => {
    if (nv) {
      dialogVisible = nv;
      console.log(props.data);
      editor.value = false;
      if (props.data.w) {
        editor.value = true;
        formData.value = {
          x: props.data.x,
          y: props.data.y,
          w: props.data.w,
          h: props.data.h,
          id: props.data.id,
          key:props.data.key,
          offestX:0,
  offestY:0,
          batchSet:false
        };
      }
    }
  }
);
function onDelete(){
  emit("delete", {
    ...formData.value,
  });
  onDialogClose();
}
function onSaveInfo() {
  console.log(formData)
  emit("saved", {
    ...formData.value,
  });
  onDialogClose();
}
function onDialogClose() {
  dialogVisible = false;
  emit("update:visible", false);
}
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    title="修改大小"
    width="30%"
    draggable
    @close="onDialogClose"
  >
    <el-input v-model="formData.x" placeholder="x" />
    <el-input v-model="formData.y" placeholder="y" />
    <el-input v-model="formData.w" placeholder="宽" />
    <el-input v-model="formData.h" placeholder="高" />
    <el-input v-model="formData.key" placeholder="编号" />

    <el-switch v-model="formData.batchSet" />

    <el-input v-if="formData.batchSet" v-model="formData.offestX" placeholder="偏移x" />
    <el-input v-if="formData.batchSet"  v-model="formData.offestY" placeholder="偏移y" />



    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onDelete">删除</el-button>

        <el-button type="primary" @click="onSaveInfo"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss">
</style>